<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  所有数组方法总结和应用

  1.转字符串方法toString join => str.split
  2.堆栈方法 push pop unshitf shift
  3.排序相关方法 reverse sort 乱序 返回值都是原数组 (在原数组上修改)
  4.数组拼接 concat()
  5.数组删改 slice() splice()
  6.indexOf lastIndexOf includes()
  7.创建数组方法：fill() 填充方法 Array.of() Array.from()
  8.find findIndex

  数组上的迭代方法：
  map forEach filter some every reduce(归并方法)



  <script>
    // 稀疏数组 有空的位
    // 打印空的位置 显示undefined
    /* 
    let arr = [1,2,3,4,5]
    delete arr[1]
    console.log(arr); 

    let arr1 = [1,,2,3,4,]
    console.log(arr1[1]); // undefined
 */

    // 类数组 1.arguments 2.DOMList  3.String
    // string 的长度是只读属性,所以调用push方法会报错
    /* 
    let arr = '1234'
    Array.prototype.push.call(arr, 5)
    console.log(arr);
 */

    // 1.转字符串方法toString join => str.split
    // 去除数组括号 不管多少层都可以
    /*   
    console.log(Array.prototype.toString.call([
      [1, 2],
      [3, 4],
      [5]
    ])); // 1,2,3,4,5

    // join连接数组 只能连接第一层
    console.log([1,[2,[3,4,5]]].join('-')); // 1-2,3,4,5
    
    let arr1 = '123'
    console.log(arr1.split(''));
 */

    // 2. 堆栈方法 push pop unshitf shift
    /**
     * push 返回值是修改后的长度 （新增）
     * pop =》 弹出的元素 （删除）
     * unshift =》 修改后的长度 （新增）
     * shift => 删除的对象 （删除）
     **/


    // 3.排序相关方法 reverse sort 乱序 返回值都是原数组 (在原数组上修改)
    /* 
    let arr = [1, 2, 3, 4, 5, 6]
    // console.log(arr, arr.reverse() === arr);
    // 利用sort乱序
    function compate() {
      return Math.random() - 0.5;
    }
    arr.sort(compate)
    console.log(arr);
 */


    //4.数组拼接 concat() 返回是一个新数组
    // 不能拼接多维数组
    /* 
    let arr = [1,2]
    // console.log(arr, arr.concat(3,4));
    // console.log(arr, arr.concat([3,4]));
    console.log(arr, arr.concat([3,[4]])); // [1, 2, 3, [4]]
 */

    // 5.数组删改 slice() splice()
    // slice(start, end) [ )左闭右开 拷贝一份原数组
    /* 
        let arr = [1,2,3,4,5]
        console.log(arr, arr.slice());

        console.log(arr.slice(2)); // [3, 4, 5]
        console.log(arr.slice(2,4)); // [3, 4]
        // start，end坐标无法交换 
        console.log(arr.slice(4,2)); // []

        console.log(arr.slice(-2)); // [4, 5]
        console.log(arr.slice(-2, -1)); // [4]
        // slice还能将类数组转换为数组
        let str = '12345'
        console.log(Array.prototype.slice.call(str));

        function test() {
          console.log(Array.prototype.slice.call(arguments));
        }
        test(1,2,3)
     */

    // splice 能操作原数组（原数组会发生改变）
    // 返回值是截取的部分 
    /**
     * 参数1：起始，增加或者删除的位置
     * 参数2：指定删除元素的个数（不接受非法值）
     * 参数3：插入的值
     * */

    /* 
    let arr = [1, 2, 3, 4, 5, 6, 7, 8]
    // console.log(arr, arr.splice());

    // console.log(arr, arr.splice(4));
    // console.log(arr, arr.splice(0,6));
    console.log(arr, arr.splice(0,0,['a']));
 */

    // 6.indexOf lastIndexOf 返回元素索引 不存在返回-1
    // 两者查找顺序不一样 
    /* 
    let arr = [1, 2, 3, 4, 5, 6, 7, 8] 
    console.log(arr.indexOf(2)); // 1                                      
    console.log(arr.lastIndexOf(2));  // 1     
 */

    // 7.
    // Array.of()
    // Array.from() 也能够将伪数组转换成数组 [...arguments]底层就是封装Array.from()

    // console.log(Array.of(3));
    // console.log(Array.of(3,4,5));

    // Array.from(arguments)

    // fill 操作原数组 可以指定填充位置 [)
    // let arr = [1,2,3,4,5,6]
    // console.log(arr, arr.fill(6));
    // console.log(arr.fill(6,0,4));


    // 8.find findIndex 
    /* 
    let arr = [1,2,3,4,5,6]
    // 返回第一个满足条件的成员
    console.log(arr.find(function(n) {
      return n > 4
    }) );
    // 返回第一满足条件成员的索引
    console.log(arr.findIndex(function(n) {
      return n > 4
    }) );
 */

    // Object.keys() Object.values() Object.entries() 
    /* 
    let obj = {
      a: 1,
      b: 2,
      c: 3,
      d: 4,
      e: 5
    }

    for (let key of Object.keys(obj)) {
      console.log(key);
    }
    for (let value of Object.values(obj)) {
      console.log(value);
    }
    for (let [key, value] of Object.entries(obj)) {
      console.log(key, value);
    }
 */

    // 1.forEach
    /**
     * 1. 没有返回值
     * 2.第二个参数绑定this指向
     * 3.不能使用break，continue 直接报错
     * 4.空数组或者稀疏数组中空元素直接跳过循环（这跟for循环不一样）
     * 5.类（伪）数组调用方式
     * */
    /* 
        // let arr = [1,2,3,4,5,6]
        // arr.forEach(function(item, index, arr) {
        //   console.log(item, index, arr);
        // })

        function test() {
          // console.log(arguments);
          // [].forEach.call(arguments, function(item) {
          //   console.log(item);
          // })

          // [...arguments].forEach(function(item) {
          //   console.log(item);
          // })

        }
        test(1,2,3,4,5,6)
     */

    // 2.map
    /**
     * 1.返回一个与原数组相互映射的新数组
     * 2.第二个参数绑定this指向
     * */
    /*     
        // let arr = [1, 2, 3, 4, 5, 6]
        // //[2, 4, 6, 8, 10, 12]
        // let newArr = arr.map(function (item, index, arr) {
        //   return item * 2
        // })
        // console.log(newArr);

        //  练习题
        // 找出每个数组的最大值
        function test(arr) {
          let res = arr.map(function (item) {
            console.log(item);
            return Math.max(...item)
          })
          return res
        }
        console.log(test([
          [4, 5, 6, 7],
          [13, 67, 89, 134],
          [557, 64567, 7957, ]
        ]));
     */

    // 3.filter
    // 过滤功能，遍历每个元素 条件是true的保留 false去除
    /* 
    let arr = [1, 2, 3, undefined, 4, null, 5, -1, 0, '', false, NaN]
    console.log(null == undefined); // true
    let newArr = arr.filter(function (item) {
      return item != undefined
    })
    console.log(newArr); //[1, 2, 3, 4, 5, -1, 0, '', false, NaN]
 */

    // 4.some every
    /* 
    let arr = [1,2,3,4,5]
    // 只要有一个成员通过，那么返回true
    var res1 = arr.some(function(item) {
      return item % 2 === 0;
    })
    
    // 全部成员通过，才返回true
    var res2 = arr.every(function(item) {
      return item % 2 === 0;
    })

    console.log(res1, res2);
 */

    // 5.reduce
    // 求和
    let sum = [0,1,2,3,4].reduce(function(accumulator, currentValue) {
      return accumulator + currentValue
    }, 10)
    console.log(sum);


  </script>
</body>

</html>